<template>
    <div class="content">
        <div class="hotfood">
            <div class="head">
                <div class="left">人气美食推荐</div>
                <div class="right">
                    <router-link to="/hot-food">查看更多></router-link>
                </div>
            </div>
            <div class="food-card">
                <div class="card">
                    <div class="photo">
                    <img src="@/assets/food1.png" alt="">
                </div>
                <div class="foot">
                    <div class="name">传统红烧肉</div>
                    <div class="introduce">经典家常菜，肥而不腻，入口即化</div>
                   <span class="like">
                    <i class="iconfont icon-aixin">1.5k</i>
                   </span>
                   <span class="comment">
                    <i class="iconfont icon-pinglun">1.2k</i>
                   </span>
                </div>
            </div>
            <div class="card">
                    <div class="photo">
                    <img src="@/assets/food1.png" alt="">
                </div>
                <div class="foot">
                    <div class="name">传统红烧肉</div>
                    <div class="introduce">经典家常菜，肥而不腻，入口即化</div>
                   <span class="like">
                    <i class="iconfont icon-aixin">1.5k</i>
                   </span>
                   <span class="comment">
                    <i class="iconfont icon-pinglun">1.2k</i>
                   </span>
                </div>
            </div>
            <div class="card">
                <div class="photo">
                    <img src="@/assets/food1.png" alt="">
                </div>
                <div class="foot">
                    <div class="name">传统红烧肉</div>
                    <div class="introduce">经典家常菜，肥而不腻，入口即化</div>
                   <span class="like">
                    <i class="iconfont icon-aixin">1.5k</i>
                   </span>
                   <span class="comment">
                    <i class="iconfont icon-pinglun">1.2k</i>
                   </span>
                </div>
            </div>
            <div class="card">
                <div class="photo">
                    <img src="@/assets/food1.png" alt="">
                </div>
                <div class="foot">
                    <div class="name">传统红烧肉</div>
                    <div class="introduce">经典家常菜，肥而不腻，入口即化</div>
                   <span class="like">
                    <i class="iconfont icon-aixin">1.5k</i>
                   </span>
                   <span class="comment">
                    <i class="iconfont icon-pinglun">1.2k</i>
                   </span>
                </div>
            </div>
            </div>
           
        </div>
        <div class="foodshare">
            <div class="head">
                <div class="left">美食灵感</div>
                <div class="right">
                    <router-link to="/hot-food">查看更多></router-link>
                </div>
            </div>
            <div class="share-card">
                <div class="card">
                    <div class="photo">
                        <img src="@/assets/logo.png" alt="">
                    </div>
                    <div class="pic-content">
                        <div class="title">新手入门：美食摄影的光线运用技巧</div>
                        <div class="card-content">想要拍出让人垂涎欲滴的美食照片？掌握光线是关键。</div>
                        <div class="card-foot">
                            <span class="author">
                                <!-- <img src="@/assets/logo.png" alt=""> -->
                                 $
                                张美食摄影
                            </span>
                            <span class="time">2024-01-15</span>
                            <span class="like iconfont icon-yanjing">3.2k</span>
                            <span class="comment iconfont icon-pinglun1">125</span>

                        </div>
                        <router-link to="/article/1" class="active">查看文章</router-link>
                    </div>

                    
                </div>
                <div class="card">
                    <div class="photo">
                        <img src="@/assets/logo.png" alt="">
                    </div>
                    <div class="pic-content">
                        <div class="title">新手入门：美食摄影的光线运用技巧</div>
                        <div class="card-content">想要拍出让人垂涎欲滴的美食照片？掌握光线是关键。</div>
                        <div class="card-foot">
                            <span class="author">
                                <!-- <img src="@/assets/logo.png" alt=""> -->
                                 $
                                张美食摄影
                            </span>
                            <span class="time">2024-01-15</span>
                            <span class="like iconfont icon-yanjing">3.2k</span>
                            <span class="comment iconfont icon-pinglun1">125</span>

                        </div>
                    </div>

                    
                </div>
                <div class="card">
                    <div class="photo">
                        <img src="@/assets/logo.png" alt="">
                    </div>
                    <div class="pic-content">
                        <div class="title">新手入门：美食摄影的光线运用技巧</div>
                        <div class="card-content">想要拍出让人垂涎欲滴的美食照片？掌握光线是关键。</div>
                        <div class="card-foot">
                            <span class="author">
                                <!-- <img src="@/assets/logo.png" alt=""> -->
                                 $
                                张美食摄影
                            </span>
                            <span class="time">2024-01-15</span>
                            <span class="like iconfont icon-yanjing">3.2k</span>
                            <span class="comment iconfont icon-pinglun1">125</span>

                        </div>
                    </div>

                    
                </div>
            </div>
        </div>        
    </div>
</template>

<script setup>



</script>

<style lang="less" scoped>
.content{
    padding: 32px 80px ;
    background: #F9FAFB;
    .hotfood{
        .head{
            display: flex;
            justify-content: space-between;
           .left{
            margin: 0 0 0 0;
            font-weight: 700;
            font-size: 24px;
            color: #000000;
            line-height: 32px;
            text-align: left;
           }
           .right{
            a{
                font-weight: 400;
                font-size: 16px;
                color: #FF4B4B;
                line-height: 32px;
                text-align: left;
                
            }
           
           }
        }
        .food-card{
            display: flex;
            .card{
            background: #FFFFFF rgba(0,0,0,0.01);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.09);
            border-radius: 12px 12px 12px 12px;
            overflow: hidden;
            margin-right:32px;
            &:last-child{
                margin-right: 0;
            }
                .photo{
                    margin:24px 24px 16px 0;
                img{
                    width: 294px;
                }
            }
            .foot{
                .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #000000;
                    text-align: left;
                    margin-bottom: 8px;
                }
                .introduce{
                    font-weight: 400;
                    font-size: 12px;
                    color: #4B5563;
                    line-height: 20px;
                    text-align: left;
                    margin-bottom: 12px;
                }
                .like{
                    font-weight: 400;
                    font-size: 10px;
                    color: #6B7280;
                    line-height: 20px;
                    text-align: left;
                    margin-right: 16px;
                }
                .comment{
                    font-weight: 400;
                    font-size: 14px;
                    color: #6B7280;
                    line-height: 20px;
                    text-align: left;
                }
            }
        }
        }
    }
    .foodshare{
        margin-top: 24px;        
        .head{
           display: flex;
           justify-content: space-between;
           .left{
            font-weight: 700;
            font-size: 24px;
            color: #000000;
            line-height: 32px;
            text-align: left;
           }
           .right{
            a{
                font-weight: 400;
                font-size: 16px;
                color: #FF4B4B;
                line-height: 32px;
                text-align: left;
                
            }
           
           }
        }
        .share-card{
            .card{
                background: #FFFFFF rgba(0,0,0,0.001);
                box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
                border-radius: 12px 12px 12px 12px;
                margin-top: 24px;
                display: flex;
                .photo{
                    margin: 24px 24px 24px 24px;
                    img{
                        width: 96px;
                    }
                }
                .pic-content{
                    margin: 24px;
                    .title{
                        font-weight: 500;
                        font-size: 20px;
                        color: #000000;
                        line-height: 28px;
                        text-align: left;
                    }
                    .card-content{
                        font-weight: 400;
                        font-size: 16px;
                        color: #4B5563;
                        line-height: 24px;
                        text-align: left;
                        margin-top: 8px;
                    }
                    .card-foot{
                        margin-top: 16px;
                        span{
                            font-weight: 400;
                            font-size: 14px;
                            color: #6B7280;
                            line-height: 20px;
                            text-align: left;
                            margin-right: 16px;
                        }
                    }
                }
            }

        }
    }

}


</style>